<template>
    <div>
        <div>
            <div style="margin:15px;padding:20px;background:#fff;border:1px solid #ddd">
                <el-row :gutter="24">
                    <el-col :span="7">
                        <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
                            <div class="el-input-group__prepend" tabindex="-1">开始时间</div>
                            <el-date-picker
                                class="el-cascader-margin w-100p"
                                v-model="value1"
                                type="date"
                                placeholder="开始时间">
                            </el-date-picker>
                        </div>
                    </el-col>
                    <el-col :span="7">
                        <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
                            <div class="el-input-group__prepend" tabindex="-1">结束时间</div>
                            <el-date-picker
                                class="el-cascader-margin w-100p"
                                v-model="value1"
                                type="date"
                                placeholder="结束时间">
                            </el-date-picker>
                        </div>
                    </el-col>
                    <el-col :span="10" class="text-left">
                        <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
                            <el-button type="text">今天</el-button>
                            <el-button type="text">7天</el-button>
                            <el-button type="text">15天</el-button>
                            <el-button type="text">30天</el-button>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="24" style="margin-top:20px;margin-bottom:20px">
                    <el-col :span="7">
                        <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
                            <div class="el-input-group__prepend" tabindex="-1">门店</div>
                            <el-cascader placeholder="请选择门店" class="el-cascader-margin w-100p"  size="medium"
                                        :options="treeData"
                                        :show-all-levels="false"
                                        change-on-select>
                            </el-cascader>
                        </div>
                    </el-col>
                    <el-col :span="7">
                        <div class="el-input el-input-group el-input-group--prepend">
                            <div class="el-input-group__prepend">付款方式</div>
                            <el-select v-model="supplier"
                                       @change="setColNum(supplier)"
                                       value-key="value" 
                                       multiple 
                                       collapse-tags
                                       placeholder="请选择入会渠道" size="medium" class="w-100p">
                            <el-option
                                v-for="item in suppliers"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                            </el-select>
                        </div>
                    </el-col>
                    <el-col :span="10" class="text-left">
                        <div>
                            <el-button type="primary"  size="medium" class="btn-info"   icon="el-icon-search"  @click="search">搜索</el-button>
                            <el-button type="primary" size="medium" class="btn-warning" style="margin-left: 1px"   icon="el-icon-refresh" @click="cleanSearch">重置</el-button>
                            <el-button type="primary" size="medium" class="btn-warning" style="margin-left: 1px"   icon="el-icon-refresh" @click="cleanSearch">导出</el-button>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div style="padding:30px 0;margin:15px;border:1px solid #ddd;background:#fff">
                <div style="display:flex;justify-content:center">
                    <div v-for="(item,index) in supplier" style="width:100%;" :class="colNum!=index?'rightLine':''">
                        <div>{{item}}</div>
                        <div>{{index}}</div>
                    </div>
                </div>
            </div>
            <div style="padding:20px 10px;margin:15px;border:1px solid #ddd;background:#fff">
                <div class="text-left" style="margin-bottom:20px">
                        <el-button type="primary"  size="medium" class="btn-info"   icon="el-icon-search">导出</el-button>
                </div>            
                <el-row :gutter="20">
                    <el-col :span="24">
                    <el-table
                        v-loading="loading"
                        :data="tableData"
                        :border="true"
                        style="width: 100%">
                        <el-table-column
                        type="index"
                        width="50">
                        </el-table-column>
                        <el-table-column
                                label="机构名称">
                            <template  slot-scope="scope">
                                <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                            <span v-else>----</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                v-for="item in supplier"
                                :label="item">
                            <template  slot-scope="scope">
                                <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                            <span v-else>----</span>
                            </template>
                        </el-table-column>
                    </el-table>
                    </el-col>
                </el-row>
                <br>
                <div class="block">
                    <el-row>
                        <el-col :span="24" class="text-right">
                        <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="pageSizes"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                        </el-pagination>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      suppliers: [
        {
          value: "现金",
          label: "现金"
        },
        {
          value: "银行卡",
          label: "银行卡"
        },
        {
          value: "会员主账户消费",
          label: "会员主账户消费"
        },
        {
          value: "挂账",
          label: "挂账"
        },
        {
          value: "微信",
          label: "微信"
        },
        {
          value: "支付宝",
          label: "支付宝"
        },
        {
          value: "第三方支付",
          label: "第三方支付"
        },
        {
          value: "优惠券",
          label: "优惠券"
        },
        {
          value: "团购劵",
          label: "团购劵"
        }
      ],
      supplier: [],
      pageSizes: window.pageSizes, //所有可选择的条数
      pageSize: window.pageSize, //控制一页显示的条数
      total: 10, //总条数
      input: "",
      currentPage: 1,
      addShow: false,
      colNum: 2
    };
  },
  created() {
    for (const item of this.suppliers) {
      this.supplier.push(item.value);
    }
  },
  methods: {
    setColNum() {
        this.colNum = this.supplier.length-1
        console.log(this.colNum)
    },
    testMethod() {
      console.log(this.supplier);
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.getData();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    addSuccess(item) {
      this.addShow = false;
      this.initData();
    },
    addClose() {
      this.addShow = false;
    },
    search() {
      console.log(this.supplier);
      console.log(this.suppliers);
    }
  }
};
</script>

<style scoped>
.rightLine{
    border-right:1px solid #ccc;
}
</style>
